<template>
  <div style="width: 400px;width: 400px; margin:0 auto;">
    <el-form :model="userForm0" ref="userForm0">
      <el-form-item label="用户名" >
        <el-input type="text" v-model="userForm0.username"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" >
        <el-input type="text" v-model="userForm0.password" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="权限" >
        <el-input type="text" v-model.number="userForm0.role" @keydown.enter.native="addUser()"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="image" label="图片附件上传">
        <el-upload
          ref="upload"
          action="1"
          :beforeUpload="beforeUploadPicture"
          :on-change="imageChange"
          :http-request="uploadImg"
          list-type="picture-card"
          name="files"
          :data="paramsData"
          :limit="3"
          multiple
          :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemovePicture">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
    </el-form>


  </div>
</template>

<script>
export default {
  name: "upload",
  data() {
    return {
      selectedCategorySpe: 1,
      serviceForm: {
        title: '',
        desc: '',
        priority: '',
        occurDate: ''
      },
      userForm0: {
        username: '',
        password: '',
        role: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  computed: {
    paramsData: function () {
      let params = {
        username: this.userForm0.username,
        password: this.userForm0.password,
        role: this.userForm0.role
      }
      return params
    }
  },
  methods: {
    uploadImg(val){
      let fd = new FormData();
      fd.append('file',val.file);
      this.$http.post('/api/v1/upload', fd).then(res=>{
        if (res.status===200){
          this.$http.post('/api/v1/add/user', this.userForm0).then(res=>{
            if(res.status===200){
              this.$message.success("添加管理员成功")
              // this.userForm0.username=''
              // this.userForm0.password=''
              // this.userForm0.role=''
              window.location.reload()
            }
          })
        }
      })
    },
    beforeUploadPicture(file) {
      const isImage = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
      const isLt2M = file.size < 1024 * 1024 * 2;
      if (!isImage) {
        this.$message.error('上传只能是png,jpg,jpeg,bmp,gif,webp格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isImage && isLt2M;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemovePicture(file, fileList) {
      console.log(file, fileList);
    },
    imageChange(file, fileList, name) {
      console.log(file, fileList);
    },
    confirm() {
      this.$refs.upload.submit();
    }
  }
}

</script>

<style scoped>

</style>
